<div class="container-fluid">
  <div class="content-block">
    <p class="lead" [translate]="'DASHBOARD.WELCOME'"></p>
    <p [innerHTML]="'DASHBOARD.WELCOME_1' | translate: { REPO_URL: KEIRA3_REPO_URL, DISCORD_URL: AC_DISCORD_URL }"></p>
    <p [innerHTML]="'DASHBOARD.WELCOME_2' | translate: { REPO_URL: KEIRA3_REPO_URL }"></p>
    <p [innerHTML]="'DASHBOARD.WELCOME_3' | translate: { DONATE_URL: PAYPAL_DONATE_URL }"></p>
    <p [innerHTML]="'DASHBOARD.WELCOME_4' | translate"></p>
  </div>

  <div class="content-block">
    <p class="lead mb-3">
      {{ 'DASHBOARD.SYSTEM_DETAILS' | translate }}
      <button type="button" class="btn btn-primary btn-sm float-end" id="reload-btn" (click)="reload()">
        <i class="fa fa-sync fa-sm"></i> {{ 'RELOAD' | translate }}
      </button>
    </p>
    @if (wrongEmuWarning) {
      <div class="alert alert-danger error-box mt-2" id="database-warning">
        <p [innerHTML]="'DASHBOARD.SYSTEM_WARNING' | translate: { DATABASE_NAME: databaseName }"></p>
        <ul>
          <li [innerHTML]="'DASHBOARD.SYSTEM_WARNING_1' | translate"></li>
          <li [innerHTML]="'DASHBOARD.SYSTEM_WARNING_2' | translate"></li>
          <li [innerHTML]="'DASHBOARD.SYSTEM_WARNING_3' | translate"></li>
        </ul>
      </div>
    }

    <table class="table table-striped table-bordered table-sm">
      <tbody>
        <tr>
          <td [translate]="'DASHBOARD.KEIRA_VERSION'"></td>
          <td>{{ KEIRA_VERSION }}</td>
        </tr>
        <tr>
          <td [translate]="'DASHBOARD.KEIRA_DETAILS'"></td>
          <td>{{ NAVIGATOR_APP_VERSION }}</td>
        </tr>
        @if (coreVersions) {
          <tr>
            <td [translate]="'DASHBOARD.AC_CORE_VERSION'"></td>
            <td id="core-version">{{ coreVersions.core_version }}</td>
          </tr>
          <tr>
            <td [translate]="'DASHBOARD.AC_COMMIT'"></td>
            <td id="core-revision">
              <a [href]="commitUrl" target="_blank" id="commit-hash-url">
                {{ coreVersions.core_revision }}
              </a>
              <button class="btn btn-secondary btn-sm ms-2 px-2 py-1" [ngxClipboard] [cbContent]="commitUrl">
                <i class="far fa-copy fa-sm"></i>
              </button>
            </td>
          </tr>
          <tr>
            <td [translate]="'DASHBOARD.AC_DB_RELEASE'"></td>
            <td id="db-version">{{ coreVersions.db_version }}</td>
          </tr>
        }
        @if (dbWorldVersion) {
          <tr>
            <td [translate]="'DASHBOARD.AC_DB_VERSION'"></td>
            <td id="db-world-version">{{ dbWorldVersion }}</td>
          </tr>
        }
      </tbody>
    </table>

    <div class="form-check">
      <input class="form-check-input" type="checkbox" [(ngModel)]="configService.debugMode" id="debug-mode" />
      <label class="form-check-label" for="debug-mode" [translate]="'DASHBOARD.DEBUG_MODE'"> </label>
    </div>
    <!--    <div class="form-check">-->
    <!--      <input class="form-check-input" type="checkbox" [(ngModel)]="configService.darkMode" id="dark-mode" />-->
    <!--      <label class="form-check-label" for="dark-mode" [translate]="'DASHBOARD.DARK_MODE'"> </label>-->
    <!--    </div>-->
  </div>
</div>
